<template>
  <div>
    <el-dialog :visible.sync="visible" v-bind="$attrs" v-on="$listeners"
               :title="dialogTitle">

      <!--填写表单-->
      <el-row>
        <el-form ref="templateForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="12">
            <el-form-item label="模板名称" prop="templateName">
              <el-input v-model="formData.templateName" placeholder="请输入模板名称" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模板类型" prop="templateType">
              <el-select v-model="formData.templateType" placeholder="请选择模板类型"
                         :style="{width: '100%'}">
                <el-option v-for="item in templateTypeOptions" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="templateDesc">
              <el-input v-model="formData.templateDesc" type="textarea" placeholder="请输入备注"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <!--模板文件-->
      <el-row :gutter="15">
        <el-button icon="el-icon-plus" @click="addTab()">新增模板文件</el-button>
        <el-divider>
        </el-divider>
        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
          <el-tab-pane
            v-for="(item, index) in formData.files"
            :key="item.id"
            :label="item.fileName"
            :name="item.fileName"
          >
            <el-input v-model="item.contents" type="textarea" placeholder="请输入备注" :autosize="{ minRows: 4, maxRows: 10}"
                      :style="{width: '100%'}"></el-input>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <div slot="footer">
        <el-button @click="visible=false">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import templateApi from "@/api/gen/config/template";
  import templateFileApi from "@/api/gen/config/templateFile";
  import {Notification} from 'element-ui';

  export default {
    inheritAttrs: false,
    components: {},
    props: [],
    data() {
      return {
        /*模板属性*/
        formData: {},
        dialogTitle: "新增模板",     //标题
        visible: false,  //开关
        editableTabsValue: '', //正在编辑的tab
        rules: {
          templateName: [{
            required: true,
            message: '请输入模板名称',
            trigger: 'blur'
          }],
          templateType: [{
            required: true,
            message: '请选择模板类型',
            trigger: 'change'
          }],
          templateDesc: [],
        },
        templateTypeOptions: [{
          "label": "单表",
          "value": 1
        }, {
          "label": "主附表",
          "value": 2
        }],
      };
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      getAllTemplateFile(data) {
        templateFileApi.findAllByTemplateId(data.id).then(res => {
          this.formData.files = res.data;
        })
      },
      /*新增模板文件*/
      addTab() {
        this.$prompt('请输入文件名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(({value}) => {
          let newTabName = value;
          let tabs = this.formData.files;
          let canAdd = true;
          tabs.forEach((tab, index) => {
            if (tab.fileName === newTabName) {
              canAdd = false;
            }
          });
          if (!canAdd) {
            this.$message({
              type: 'error',
              message: '相同文件名'
            });
            return;
          }
          this.formData.files.push({
            fileName: newTabName,
            contents: '输入模板代码',
            templateId: this.formData.id
          });
          this.editableTabsValue = newTabName;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          });
        });
      },
      /*删除模板文件*/
      removeTab(targetName) {
        let tabs = this.formData.files;
        let id = undefined;
        tabs.forEach((tab, index) => {
          if (tab.fileName === targetName) {
            id = tab.id;
            if (activeName === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                this.editableTabsValue = nextTab.fileName;
              }
            }
          }

        });
        if (id !== undefined) {
          templateFileApi.deleteOne(id)
        }

      },
      /*打开弹窗*/
      openDialog(data) {
        if (data) {
          this.dialogTitle = "编辑模板";
          this.formData = data;
          this.getAllTemplateFile(data);
        } else {
          this.formData = {}
        }
        this.visible = true;
      },
      /*确认按钮*/
      handelConfirm() {
        this.$refs['templateForm'].validate(valid => {
          if (!valid) return;
          templateApi.saveOne(this.formData).then(res => {
            if (res.success) {
              Notification({
                title: '成功',
                message: '保存数据成功!',
                type: 'success',
                duration: 2000
              });
              this.visible = false;
              this.$parent.getAllTemplate();
            } else {
              Notification({
                title: '失败',
                message: '保存数据失败!',
                type: 'error',
                duration: 2000
              })
            }
          });

        })
      },
    }
  }

</script>
<style>
</style>
